<template>
    <section class="form_contianer">
        <el-form :model="loginForm" ref="loginForm"  class="loginForm">
            <div class="loginTitle">器官移植管理系统</div>
            <el-form-item label="" prop="username" :rules="[{ required: true, message: '用户名不能为空'}]"
            >
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="工号"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password" :rules="[{ required: true, message: '密码不能为空'}]"
            >
                <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="loginBtn" @click="submitForm('loginForm')">登录</el-button>
            </el-form-item>
        </el-form>
    </section>
</template>

<style lang='scss' rel='stylesheet/scss' scoped>
    .form_contianer{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #F2F2F2;
        .loginForm{
            width: 320px;
            height: 210px;
            padding: 25px;
            position: absolute;
            margin:auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #fff;
            .loginTitle{
                margin-bottom: 22px;
                text-align: center;
            }
            .loginBtn{
                width: 100%;
            }
        }
    }
</style>

<script>
    export default {
        data() {
            return {
                loginForm: {
                    username: '',
                    password: ''
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$router.push('/kidney')
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }    
        }
    }
</script>

